import React, { useState, useEffect } from "react";
import { Table, message, Button, notification, Tooltip } from "antd";
import { useNavigate } from "react-router";
import { CheckOutlined, CloseOutlined } from "@ant-design/icons";
import axios from "axios";

/**
 * roleId [1: 超级管理员, 2: 区域管理员, 3: 区域编辑]
 */

export default function Audit() {
  const [dataSource, setDataSource] = useState([]);
  const navigate = useNavigate();
  const { username, roleId, region } = JSON.parse(
    localStorage.getItem("token")
  );

  useEffect(() => {
    const roleObj = {
      1: "superadmin",
      2: "admin",
      3: "editor",
    };
    axios
      .get("http://localhost:5000/news?auditState=1&_expand=category")
      .then((res) => {
        let list = res.data;
        setDataSource(
          roleObj[roleId] === "superadmin"
            ? list
            : [
                ...list.filter((data) => data.author === username),
                ...list.filter(
                  (data) =>
                    data.region === region &&
                    roleObj[data.roleId] === "editor" &&
                    data.author !== username
                ),
              ]
        );
        // console.log(res.data);
      });
  }, [username, roleId, region]);
  // 通过 驳回
  const handleAudit = (item, auditState, publishState) => {
    setDataSource(dataSource.filter((data) => data.id !== item.id));
    axios
      .patch(`http://localhost:5000/news/${item.id}`, {
        auditState,
        publishState,
      })
      .then(() => {
        navigate("/audit-manage/list");
        // 成功后的消息通知
        notification.open({
          message: "通知",
          description: "您可以到【审核管理/审核列表】中查看您的新闻的审核状态",
          duration: 4,
          placement: "bottomRight",
        });
      })
      .catch(() => {
        message.error("操作失败");
      });
  };
  const columns = [
    {
      title: "新闻标题",
      dataIndex: "title",
      render: (title, item) => {
        return (
          <a href={`http://localhost:3000/#/news-manage/preview/${item.id}`}>
            {title}
          </a>
        );
      },
    },
    {
      title: "新闻分类",
      dataIndex: "category",
      render: (category) => {
        return category.title;
      },
    },
    {
      title: "作者",
      dataIndex: "author",
    },
    {
      title: "操作",
      render: (item) => {
        return (
          <div>
            <Tooltip title="通过">
              <Button
                type="primary"
                shape="circle"
                icon={<CheckOutlined />}
                onClick={() => handleAudit(item, 2, 1)}
              />
            </Tooltip>
            &nbsp;
            <Tooltip title="驳回">
              <Button
                type="danger"
                shape="circle"
                icon={<CloseOutlined />}
                onClick={() => handleAudit(item, 3, 0)}
              />
            </Tooltip>
          </div>
        );
      },
    },
  ];
  return (
    <div>
      {" "}
      <Table
        dataSource={dataSource}
        columns={columns}
        rowKey={(item) => item.id}
        pagination={{ pageSize: 5 }}
      />
    </div>
  );
}
